<template>
  <div>
    <el-form label-position="right" label-width="80px" size="small">
      <el-form-item label="类型">
        <el-select v-model="legend.type" placeholder="请选择">
          <el-option label="plain" value="plain"></el-option>
          <el-option label="scroll" value="scroll"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch
            v-model="legend.show"
            @change="this.setLegendShow"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item label="位置：左">
        <el-input v-model="legend.left" @change="this.setLegendLeft"></el-input>
      </el-form-item>
      <el-form-item label="位置：上">
        <el-input v-model="legend.top" @change="this.setLegendTop"></el-input>
      </el-form-item>
      <el-form-item label="位置：右">
        <el-input v-model="legend.right" @change="this.setLegendRight"></el-input>
      </el-form-item>
      <el-form-item label="位置：下">
        <el-input v-model="legend.bottom" @change="this.setLegendBottom"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'

export default {
  name: "Index",
  data() {
    return {}
  },
  computed: {
    ...mapGetters({legend: "legend"})
  },
  methods: {
    ...mapMutations([
      'setLegendType',
      'setLegendShow',
      'setLegendLeft',
      'setLegendRight',
      'setLegendTop',
      'setLegendBottom',
    ])
  }

}
</script>

<style scoped>

</style>